<template>
  <div class="page-container">
    <div class="in-container">
      <AppSearchForm @submit="search()" @reset="reset()">
        <el-form-item>
          <el-input
            v-model="query.name"
            clearable
            placeholder="输入任务名称搜索"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="query.date"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
      </AppSearchForm>
      <div class="btn-area">
        <el-button
          @click="openAddDialog"
          type="primary"
          v-hasPermi="'systemTasksCreate'"
        >
          新增
        </el-button>
      </div>
      <AppPageTable
        stripe
        :data="tableData.data"
        @change="getList()"
        :option="tableData.option"
        class="table"
      >
        <el-table-column
          :show-overflow-tooltip="true"
          prop="id"
          label="任务ID"
          width="150px"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="taskName"
          label="任务名称"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="description"
          width="150px"
          label="描述"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="taskGroup"
          label="任务组"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="assemblyName"
          label="程序集"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="className"
          label="执行类"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="triggerTypeStr"
          label="触发器模式"
          width="136px"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="cron"
          label="cron表达式"
          width="136px"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="runTimes"
          label="已执行次数"
          width="100px"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="runParams"
          label="执行参数"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="principal"
          label="任务负责人"
          width="100px"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="alertEmail"
          label="告警邮箱"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="isEnable"
          width="90px"
          label="DB状态"
        >
          <template #default="scope">
            <el-tag :type="scope.row.isEnable ? 'success' : 'warning'">{{
              scope.row.isEnable ? "启动" : "停用"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="triggerStatus"
          width="90px"
          label="RAM状态"
        >
          <template #default="scope">
            <el-tag
              :type="scope.row.triggerStatus === '正常' ? 'success' : 'warning'"
              >{{ scope.row.triggerStatus }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="createTime"
          width="136px"
          label="创建时间"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="updateTime"
          width="136px"
          label="更新时间"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="startTime"
          width="136px"
          label="开始时间"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="endTime"
          width="136px"
          label="结束时间"
        />
        <el-table-column
          label="操作"
          width="160px"
          fixed="right"
          align="center"
        >
          <template #default="scope">
            <el-button
              @click="update(scope.row)"
              link
              v-hasPermi="'timing_edit'"
              type="primary"
              >编辑</el-button
            >
            <el-button
              @click="active(scope.row)"
              link
              v-hasPermi="'timing_edit'"
              type="primary"
              >执行</el-button
            >
            <el-button
              @click="pause(scope.row)"
              link
              v-show="scope.row.triggerStatus === '正常'"
              v-hasPermi="'timing_edit'"
              type="warning"
              >暂停</el-button
            >
            <el-button
              v-show="scope.row.triggerStatus === '暂停'"
              link
              @click="resume(scope.row)"
              v-hasPermi="'timing_edit'"
              type="success"
              >恢复</el-button
            >
            <el-popconfirm
              title="确定删除本条数据吗？"
              @confirm="deleteData(scope.row)"
            >
              <template #reference>
                <el-button link v-hasPermi="'timing_del'" type="danger"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
            <el-button @click="log(scope.row)" link v-hasPermi="'admin'" type="primary"
              >日志</el-button
            >
          </template>
        </el-table-column>
      </AppPageTable>
      <el-dialog
        :title="formDialogData.title"
        v-model="formDialogData.show"
        width="730px"
        :close-on-click-modal="false"
      >
        <el-form
          :model="formData"
          :rules="formRules"
          label-width="100px"
          :inline="true"
          ref="form"
          size="small"
        >
          <el-form-item label="任务组" prop="taskGroup">
            <el-input v-model="formData.taskGroup" style="width: 220px" />
          </el-form-item>
          <el-form-item label="程序集" prop="assemblyName">
            <el-input v-model="formData.assemblyName" style="width: 220px" />
          </el-form-item>
          <el-form-item label="任务名称" prop="taskName">
            <el-input v-model="formData.taskName" style="width: 220px" />
          </el-form-item>
          <el-form-item label="任务描述" prop="description">
            <el-input v-model="formData.description" style="width: 220px" />
          </el-form-item>
          <el-form-item label="执行类" prop="className">
            <el-input v-model="formData.className" style="width: 220px" />
          </el-form-item>
          <el-form-item label="Cron表达式" prop="cron">
            <el-input v-model="formData.cron" style="width: 220px" />
          </el-form-item>
          <el-form-item label="任务负责人" prop="principal">
            <el-input v-model="formData.principal" style="width: 220px" />
          </el-form-item>
          <el-form-item label="告警邮箱" prop="alertEmail">
            <el-input
              v-model="formData.alertEmail"
              placeholder="多个邮箱用逗号隔开"
              style="width: 220px"
            />
          </el-form-item>
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="formData.startTime"
              type="date"
              style="width: 220px"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item label="結束时间">
            <el-date-picker
              v-model="formData.endTime"
              type="date"
              style="width: 220px"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item label="执行间隔(秒)" prop="intervalSecond">
            <el-input
              v-model="formData.intervalSecond"
              placeholder="非Cron表达式模式使用"
              style="width: 220px"
            />
          </el-form-item>
          <el-form-item label="循环次数" prop="cycleRunTimes">
            <el-input
              v-model="formData.cycleRunTimes"
              placeholder="非Cron表达式模式使用"
              style="width: 220px"
            />
          </el-form-item>
          <el-form-item label="失败后暂停">
            <el-radio-group
              v-model="formData.pauseAfterFailure"
              style="width: 220px"
            >
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-radio-group v-model="formData.isEnable" style="width: 220px">
              <el-radio :label="true">启用</el-radio>
              <el-radio :label="false">停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="参数内容">
            <el-input
              v-model="formData.runParams"
              style="width: 556px"
              rows="4"
              type="textarea"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel" link>取消</el-button>
            <el-button type="primary" @click="submit"> 确认 </el-button>
          </span>
        </template>
      </el-dialog>
      <tasksLog ref="log"> </tasksLog>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import AppSearchForm from "@/components/AppSearchForm.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import AppTitleBox from "@/components/AppTitleBox.vue";
import tasksLog from "./components/tasksLog.vue";
export default defineComponent({
  components: {
    AppSearchForm,
    AppPageTable,
    AppTitleBox,
    tasksLog,
  },
  data() {
    return {
      query: {
        name: "",
        date: [],
      },
      tableData: {
        data: [],
        option: useTableOption(),
      },
      formDialogData: {
        show: false,
        title: "",
        btnLoading: false,
      },
      logDialogData: {
        show: false,
        title: "",
        btnLoading: false,
      },
      formData: {
        taskGroup: "",
        assemblyName: "",
        taskName: "",
        description: "",
        className: "",
        cron: "",
        principal: "",
        alertEmail: "",
        startTime: "",
        endTime: "",
        intervalSecond: 0,
        cycleRunTimes: 0,
        pauseAfterFailure: true,
        isEnable: true,
        runParams: "",
      },
      formRules: {
        taskGroup: [
          { required: true, message: "请输入任务組", trigger: "blur" },
        ],
        assemblyName: [
          { required: true, message: "请输入程序集", trigger: "blur" },
        ],
        taskName: [
          { required: true, message: "请输入任务名称", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请输入任务描述", trigger: "blur" },
        ],
        className: [
          { required: true, message: "请输入执行类", trigger: "blur" },
        ],
        principal: [
          { required: true, message: "请输入负责人名称", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    getList() {
      let url = "/api/tasks/query";
      if (this.query.date && this.query.date.length > 0) {
        this.query.date[0] = dayjs(this.query.date[0]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.query.date[1] = dayjs(this.query.date[1])
          .add(1, "day")
          .subtract(1, "second")
          .format("YYYY-MM-DD HH:mm:ss");
        url =
          url +
          `?CreateTime=${this.query.date[0]}&CreateTime=${this.query.date[1]}`;
      }
      this.tableData.option.loading = true;
      this.$http
        .get(url, {
          TaskName: this.query.name,
          PageIndex: this.tableData.option.page,
          PageSize: this.tableData.option.pageSize,
        })
        .then((res) => {
          this.tableData.data = res.content;
          this.tableData.option.total = res.totalElements;
        })
        .finally(() => {
          this.tableData.option.loading = false;
        });
    },
    search() {
      this.tableData.option.page = 1;
      this.tableData.pageSize = 10;
      this.getList();
    },
    reset() {
      this.query.name = "";
      this.tableData.option.page = 1;
      this.tableData.pageSize = 10;
      this.getList();
    },
    update(data) {
      this.formData = JSON.parse(JSON.stringify(data));
      this.formDialogData.title = "编辑作业调度";
      this.formDialogData.show = true;
    },
    active(data) {
      this.$http.post("/api/tasks/execute/" + data.id).then((res) => {
        if (res.status) {
          this.$message.success(res.message);
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    pause(data) {
      this.$http.post("/api/tasks/pause/" + data.id).then((res) => {
        if (res.status) {
          this.$message.success(res.message);
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    resume(data) {
      this.$http.post("/api/tasks/resume/" + data.id).then((res) => {
        if (res.status) {
          this.$message.success(res.message);
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    deleteData(data) {
      this.$http
        .post("/api/tasks/delete", {
          idArray: [data.id],
        })
        .then((res) => {
          if (res.status) {
            this.$message.success(res.message);
            this.getList();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    log(data) {
      this.$refs.log.init(data.id);
    },
    openAddDialog() {
      this.formDialogData.title = "新增作业调度";
      this.formDialogData.show = true;
    },
    submit() {
      this.formDialogData.btnLoading = true;
      let url = "";
      if (this.formData.id) {
        url = "/api/tasks/edit";
      } else {
        url = "/api/tasks/create";
      }
      this.$http.post(url, this.formData).then((res) => {
        if (res.status) {
          this.$message.success(res.message);
          this.getList();
          this.formDialogData.show = false;
        } else {
          this.$message.error(res.message);
        }
        this.formDialogData.btnLoading = false;
      });
    },
    cancel() {
      this.formDialogData.show = false;
    },
  },
  watch: {
    "formDialogData.show"(newVal) {
      if (!newVal) {
        this.formData = {
          portCode: "",
          portName: "",
          portEnName: "",
          nationId: "",
        };
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
        });
      }
    },
  },
  created() {
    this.getList();
  },
});
</script>

<style lang="scss" scoped>
.btn-area {
  margin-bottom: 8px;
}

.in-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  .table {
    flex: 1;
  }
}
.table :deep(.el-button) + .el-button {
  margin-left: 1px;
}
</style>
